<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="banners-app">

    <div class="row">
        <div class="col-md-6">
            <a class="btn btn-default" @click="getList">刷新</a>
            <a v-show="!show.edit" class="btn btn-info" @click="add">添加</a>
            <a v-show="show.edit" class="btn btn-danger" @click="show.edit = false">关闭</a>
        </div>
        <div class="col-md-2">
            <div class="form-group">
                <select class="form-control" v-model="page.page_code">
                    <option value="0">全部...</option>
                    <option v-for="p in pages" :value="p.id">{{p.name}}</option>
                </select>
            </div>
        </div>
    </div>

    <div class="row" v-show="!show.edit">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>页面</th>
                    <th>图片</th>
                    <th width="100">排序</th>
                    <th>跳转类型</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.page | Page}}</td>
                    <td>
                        <a class="avatar" :href="item.image" target="_blank">
                            <img :src="item.image">
                        </a>
                    </td>
                    <td>
                        <input v-if="rank_edit" class="number-input" type="number" min="1" v-model="item.rank">
                        <span v-if="!rank_edit">{{item.rank}}</span>
                    </td>
                    <td>{{item.link_type | LinkType}}</td>
                    <td>
                        <a class="btn btn-primary btn-xs" @click="edit(item)">编辑</a>
                        <a class="btn btn-danger btn-xs" @click="del(item)">删除</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="3">
                        <pagination :total="page.total" :limit="page.limit" :offset="page.offset" @turn="turnPage" ></pagination>
                    </td>
                    <td>
                        <a v-if="rank_edit" class="btn btn-primary btn-xs" @click="saveRank">保存</a>
                        <a v-if="rank_edit" class="btn btn-warning btn-xs" @click="rank_edit = false">取消</a>
                        <a v-if="!rank_edit" class="btn btn-info btn-xs" @click="rank_edit = true">修改排序</a>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-show="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">

                <div class="form-group has-warning">
                    <label>页面</label>
                    <select class="form-control" v-model="edit_item.page">
                        <option value="0">请选择...</option>
                        <option v-for="p in pages" v-if="p.id>0" :value="p.id">{{p.name}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>图片(750x380)</label>
                    <file-uploader v-model="edit_item.image" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>

                <div class="form-group has-warning">
                    <label>跳转类型</label>
                    <select class="form-control" v-model="edit_item.link_type">
                        <option v-for="(t,i) in linkTypes" :value="i">{{t}}</option>
                    </select>
                </div>

                <div class="form-group">
                    <label>目标值</label>
                    <input class="form-control" v-model="edit_item.target">
                </div>

                <div class="form-group">
                    <label>排序</label>
                    <input class="form-control" v-model="edit_item.rank">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="show.edit = false">关闭</a>
                </div>
            </div>
        </div>
    </div>

</section>
<!-- /.content -->

<script>
    var Pages = [
        {id:1,name:'首页'},
        {id:2,name:'大咖'},
        {id:3,name:'课程'},
        {id:4,name:'PC首页'},
        {id:5,name:'PC资讯详情'},
        {id:6,name:'PC视频直播室二维码'},
        {id:7,name:'问答首页'},
    ];

    var banners_app = new Vue({
        el: '#banners-app',
        data: {
            list: [],
            edit_item: {},
            page: {
                total: 0,
                limit: 10,
                offset: 0,
                page_code: 0
            },
            show: {
                edit: false
            },
            pages: Pages,
            linkTypes: {},
            rank_edit: false
        },
        created: function () {
            this.getList();
            ajax({
                uri: '/common/link_types',
                success: function (resp) {
                    this.linkTypes = resp.data;
                }.bind(this)
            })
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/banners/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.list;
                        this.page.total = resp.total;
                    }.bind(this)
                });
            },
            add: function () {
                this.edit_item = {page:0,link_type:0};
                this.show.edit = true;
            },
            edit: function (item) {
                this.edit_item = item;
                this.show.edit = true;
            },
            save: function () {
                var item = this.edit_item;
                if (!item.page || !item.image) {
                    alert('请完善资料！');
                    return;
                }

                ajax({
                    uri: '/banners/save',
                    data: item,
                    success: function(resp){
                        this.show.edit = false;
                        this.getList();
                    }.bind(this)
                });
            },
            del: function (item) {
                ajax({
                    uri: '/banners/del',
                    data: {id: item.id},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            },
            saveRank: function () {
                var ranks = [];
                this.list.forEach(function (item, index) {
                    ranks.push({id: item.id, rank: item.rank});
                });
                if (ranks.length > 0) {
                    ajax({
                        uri: '/banners/set_rank',
                        data: {ranks: JSON.stringify(ranks)},
                        success: function (resp) {
                            this.rank_edit = false;
                            this.getList();
                        }.bind(this)
                    })
                }
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            }
        },
        filters: {
            Page: function (id) {
                for (var i=0; i<Pages.length; i++) {
                    var t = Pages[i];
                    if (t.id == id) {
                        return t.name;
                    }
                }
                return '';
            },
            LinkType: function (id) {
                var LinkTypes = banners_app.linkTypes;
                for (var i=0; i<LinkTypes.length; i++) {
                    var t = LinkTypes[i];
                    if (t.id == id) {
                        return t.name;
                    }
                }
                return '';
            }
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            },
            'page.page_code': function (nv, ov) {
                this.getList();
            }
        }
    });
</script>